<script setup lang="ts">
import { defineProps } from 'vue'
interface MapIconPropType {
    title: string
    url: string
}

const props = defineProps<MapIconPropType>()

//加载本地图片
const getImgUrl = (url: string) => {
    return new URL(url, import.meta.url).href
}
</script>

<template>
    <div class="logo">
        <img class="logo-img" :src="getImgUrl(props.url)" alt="">
        <span class="logo-text">{{ props.title }}</span>
    </div>
</template>

<style scoped>
.logo {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    display: flex;
    align-items: center;
}
.logo .logo-img {
    /* width: 50px; */
    height: 50px;
}

.logo .logo-text {
    font-size: 20px;
    color: #4b5ce3;
    font-weight: 700;
    margin-left: 15px;
}
</style>